﻿@{
    ViewData["Title"] = "Faq";
}

<div class="normalheader transition animated fadeIn">
    <div class="hpanel">
        <div class="panel-body">
            <a class="small-header-action" href="">
                <div class="clip-header">
                    <i class="fa fa-arrow-up"></i>
                </div>
            </a>

            <div id="hbreadcrumb" class="pull-right m-t-lg">
                <ol class="hbreadcrumb breadcrumb">
                    <li><a href="index.html">Dashboard</a></li>
                    <li>
                        <span>App views</span>
                    </li>
                    <li class="active">
                        <span>FAQ</span>
                    </li>
                </ol>
            </div>
            <h2 class="font-light m-b-xs">
                FAQ
            </h2>
            <small>FAQ page - build faq/support page for your app</small>
        </div>
    </div>
</div>

<div class="content animate-panel">


    <div class="row">
        <div class="col-lg-12">
            <div class="hpanel">
                <div class="panel-body">
                    <div class="">Frequently asked questions. Find the answer or contact with us on support email.</div>
                    <div class="m-t-sm">
                        <div class="input-group">
                            <input class="form-control" type="text" placeholder="Search question..">
                            <div class="input-group-btn">
                                <button class="btn btn-default"><i class="fa fa-search"></i></button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-6">
            <div class="hpanel panel-group" id="accordion" role="tablist" aria-multiselectable="false">
                <div class="panel-body">
                    <h4 class="m-t-none m-b-none">General questions</h4>
                    <small class="text-muted">All general questions about our app.</small>
                </div>
                <div class="panel-body">
                    <a data-toggle="collapse" data-parent="#accordion" href="#q1" aria-expanded="true">
                        <i class="fa fa-chevron-down pull-right text-muted"></i>
                        Where can I purchase Homer theme ?
                    </a>
                    <div id="q1" class="panel-collapse collapse in">
                        <hr>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal.
                    </div>
                </div>
                <div class="panel-body">
                    <a data-toggle="collapse" data-parent="#accordion" href="#q2" aria-expanded="true">
                        <i class="fa fa-chevron-down pull-right text-muted"></i>
                        Many desktop publishing packages ?
                    </a>
                    <div id="q2" class="panel-collapse collapse">
                        <hr>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal.
                    </div>
                </div>
                <div class="panel-body">
                    <a data-toggle="collapse" data-parent="#accordion" href="#q3" aria-expanded="true">
                        <i class="fa fa-chevron-down pull-right text-muted"></i>
                        Lorem Ipsum available, but the majority have ?
                    </a>
                    <div id="q3" class="panel-collapse collapse">
                        <hr>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal.
                    </div>
                </div>
                <div class="panel-body">
                    <a data-toggle="collapse" data-parent="#accordion" href="#q4" aria-expanded="true">
                        <i class="fa fa-chevron-down pull-right text-muted"></i>
                        The generated Lorem Ipsum is therefore always ?
                    </a>
                    <div id="q4" class="panel-collapse collapse">
                        <hr>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal.
                    </div>
                </div>
                <div class="panel-body">
                    <a data-toggle="collapse" data-parent="#accordion" href="#q5" aria-expanded="true">
                        <i class="fa fa-chevron-down pull-right text-muted"></i>
                        College in Virginia, looked up one of ?
                    </a>
                    <div id="q5" class="panel-collapse collapse">
                        <hr>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal.
                    </div>
                </div>
                <div class="panel-body">
                    <a data-toggle="collapse" data-parent="#accordion" href="#q6" aria-expanded="true">
                        <i class="fa fa-chevron-down pull-right text-muted"></i>
                        Lorem Ipsum is simply dummy ?
                    </a>
                    <div id="q6" class="panel-collapse collapse">
                        <hr>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal.
                    </div>
                </div>
                <div class="panel-body">
                    <a data-toggle="collapse" data-parent="#accordion" href="#q7" aria-expanded="true">
                        <i class="fa fa-chevron-down pull-right text-muted"></i>
                        The standard chunk of Lorem Ipsum used since ?
                    </a>
                    <div id="q7" class="panel-collapse collapse">
                        <hr>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal.
                    </div>
                </div>
                <div class="panel-body">
                    <a data-toggle="collapse" data-parent="#accordion" href="#q8" aria-expanded="true">
                        <i class="fa fa-chevron-down pull-right text-muted"></i>
                        Many desktop publishing ?
                    </a>
                    <div id="q8" class="panel-collapse collapse">
                        <hr>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal.
                    </div>
                </div>
                <div class="panel-body">
                    <a data-toggle="collapse" data-parent="#accordion" href="#q9" aria-expanded="true">
                        <i class="fa fa-chevron-down pull-right text-muted"></i>
                        Cicero are also reproduced in their exact original form, accompanied ?
                    </a>
                    <div id="q9" class="panel-collapse collapse">
                        <hr>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal.
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="hpanel panel-group" id="accordion2" role="tablist" aria-multiselectable="true">
                <div class="panel-body">
                    <h4 class="m-t-none m-b-none">Technical questions</h4>
                    <small class="text-muted">All technical questions about our app.</small>
                </div>
                <div class="panel-body">
                    <a data-toggle="collapse" data-parent="#accordion2" href="#q10" aria-expanded="true">
                        <i class="fa fa-chevron-down pull-right text-muted"></i>
                        The point of using Lorem Ipsum ?
                    </a>
                    <div id="q10" class="panel-collapse collapse">
                        <hr>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal.
                    </div>
                </div>
                <div class="panel-body">
                    <a data-toggle="collapse" data-parent="#accordion2" href="#q11" aria-expanded="true">
                        <i class="fa fa-chevron-down pull-right text-muted"></i>
                        Lorem Ipsum passage, and going through the cites ?
                    </a>
                    <div id="q11" class="panel-collapse collapse">
                        <hr>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal.
                    </div>
                </div>
                <div class="panel-body">
                    <a data-toggle="collapse" data-parent="#accordion2" href="#q12" aria-expanded="true">
                        <i class="fa fa-chevron-down pull-right text-muted"></i>
                        Many desktop publishing packages and ?
                    </a>
                    <div id="q12" class="panel-collapse collapse">
                        <hr>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal.
                    </div>
                </div>
                <div class="panel-body">
                    <a data-toggle="collapse" data-parent="#accordion2" href="#q13" aria-expanded="true">
                        <i class="fa fa-chevron-down pull-right text-muted"></i>
                        Aldus PageMaker including versions of Lorem Ipsum ?
                    </a>
                    <div id="q13" class="panel-collapse collapse">
                        <hr>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal.
                    </div>
                </div>
                <div class="panel-body">
                    <a data-toggle="collapse" data-parent="#accordion2" href="#q14" aria-expanded="true">
                        <i class="fa fa-chevron-down pull-right text-muted"></i>
                        Nor again is there anyone who ?
                    </a>
                    <div id="q14" class="panel-collapse collapse">
                        <hr>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal.
                    </div>
                </div>
                <div class="panel-body">
                    <a data-toggle="collapse" data-parent="#accordion2" href="#q15" aria-expanded="true">
                        <i class="fa fa-chevron-down pull-right text-muted"></i>
                        Neque porro quisquam est, qui dolorem ipsum ?
                    </a>
                    <div id="q15" class="panel-collapse collapse">
                        <hr>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal.
                    </div>
                </div>
                <div class="panel-body">
                    <a data-toggle="collapse" data-parent="#accordion2" href="#q16" aria-expanded="true">
                        <i class="fa fa-chevron-down pull-right text-muted"></i>
                        Temporibus autem quibusdam ?
                    </a>
                    <div id="q16" class="panel-collapse collapse">
                        <hr>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal.
                    </div>
                </div>
                <div class="panel-body">
                    <a data-toggle="collapse" data-parent="#accordion2" href="#q17" aria-expanded="true">
                        <i class="fa fa-chevron-down pull-right text-muted"></i>
                        Et harum quidem rerum facilis ?
                    </a>
                    <div id="q17" class="panel-collapse collapse">
                        <hr>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal.
                    </div>
                </div>
                <div class="panel-body">
                    <a data-toggle="collapse" data-parent="#accordion2" href="#q18" aria-expanded="true">
                        <i class="fa fa-chevron-down pull-right text-muted"></i>
                        The wise man therefore always  ?
                    </a>
                    <div id="q18" class="panel-collapse collapse">
                        <hr>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal.
                    </div>
                </div>
            </div>
        </div>
    </div>


</div>

<div class="hpanel panel-group" id="accordion12">
    <div class="panel">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion12"
                   href="#q111">
                    点击我进行展开，再次点击我进行折叠。第 1 部分
                </a>
            </h4>
        </div>
        <div id="q111" class="panel-collapse collapse panel-body">
            <hr>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal.
        </div>
    </div>
    <div class="panel">
        <div class="panel-heading" style="display:block">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion12"
                   href="#q112" >
                    点击我进行展开，再次点击我进行折叠。第 2 部分
                </a>
            </h4>
        </div>
        <div id="q112" class="panel-collapse collapse panel-body">
            <hr>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal.
        </div>
    </div>

</div>

<div class="panel-group" id="accordion111">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion111"
                   href="#collapseOne">
                    点击我进行展开，再次点击我进行折叠。第 1 部分
                </a>
            </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">
                Nihil anim keffiyeh helvetica, craft beer labore wes anderson
                cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
                vice lomo.
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion111"
                   href="#collapseTwo">
                    点击我进行展开，再次点击我进行折叠。第 2 部分
                </a>
            </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse">
            <div class="panel-body">
                Nihil anim keffiyeh helvetica, craft beer labore wes anderson
                cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
                vice lomo.
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion111"
                   href="#collapseThree">
                    点击我进行展开，再次点击我进行折叠。第 3 部分
                </a>
            </h4>
        </div>
        <div id="collapseThree" class="panel-collapse collapse">
            <div class="panel-body">
                Nihil anim keffiyeh helvetica, craft beer labore wes anderson
                cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
                vice lomo.
            </div>
        </div>
    </div>
</div>

<button type="button" class="btn btn-primary" data-toggle="collapse"
        data-target="#demo">
    简单的可折叠组件
</button>

<div id="demo" class="collapse in">
    Nihil anim keffiyeh helvetica, craft beer labore wes anderson
    cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
    vice lomo.
</div>


